<!--
 * @Autor: Haiting Zhao
 * @Date: 2021-12-07 14:56:01
 * @LastEditors: Haiting Zhao
 * @LastEditTime: 2021-12-19 12:39:10
 * @Description: file content
 * @FilePath: \Management-of-Scientific-Research-in-Universities-Front\src\views\myproject\Workplace.vue
-->
<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>我的项目</el-breadcrumb-item>
      <el-breadcrumb-item>工作台</el-breadcrumb-item>
    </el-breadcrumb>
    <el-container>
      <el-header style="height: 100px; margin-top:25px; border-bottom: 1px solid rgb(221, 221, 221);">
        <el-row>
          <el-col :span="1" style="float: left; margin-right: 25px;">
            <el-avatar size="large" :src="imgurl" />
          </el-col>
          <el-col :span="12">
            <p class="text1">{{ userinformation.username }}，欢迎回来！祝您开心每一天！</p>
            <p class="titletext" style="margin-top:10px;">四川师范大学 | 计算机科学学院 | {{ userinformation.rolename }}</p>
          </el-col>
          <el-col :span="2" style="float:right;">
            <p class="titletext">项目数</p>
            <p class="text1" style="margin-top:10px;">{{ projectlistlength }}</p>
          </el-col>
        </el-row>
      </el-header>

      <el-main>
        <el-row>

          <!-- 左边区域 -->
          <el-col class="leftpart" :span="16" style="float: left; margin-right: 4%;">
            <!-- 我的项目 -->
            <el-row>
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span class="text2">我的项目</span>
                  <el-button style="float: right; padding: 3px 0" type="text" @click="gotoall()">全部项目</el-button>
                </div>
                <el-row
                  v-infinite-scroll="infiniteScroll"
                  :infinite-scroll-disabled="routeLoad || noMore"
                  :infinite-scroll-distance="3"
                  class="all-route"
                >
                  <div v-if="haveproject">
                    <el-col
                      v-for="(project, index) in routeData"
                      :key="index"
                      :span="8"
                      :offset="index > routeData.length ? 2 : 0"
                    >
                      <el-card :body-style="{ padding: '0px' }" style="">
                        <div style="padding: 10px" @click="gotodetail(index)">
                          <p style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis; height:35px; line-height: 35px;">
                            <el-avatar :src="project.fileMap.logo" size="small" style="margin-right: 10px; vertical-align:middle;" />
                            <span class=" display:inline-block; width:150px;">{{ project.projectName }}</span>
                          </p>
                          <!-- <el-tooltip class="item" effect="light" :content="project.introduction" placement="bottom-start"> -->
                          <div class="intro">
                            {{ project.introduction }}
                          </div>
                          <!-- </el-tooltip> -->
                          <div class="bottom" style="float:right;">
                            <!-- <time class="time">{{ currentDate }}</time> -->
                            <el-button type="text" class="button" style="right:10px;" @click="gotodetail(index)">查看详情</el-button>
                          </div>
                        </div>
                      </el-card>
                    </el-col>
                  </div>
                  <div v-if="!haveproject" class="nullmessage">
                    暂无数据
                  </div>
                </el-row>
              </el-card>
            </el-row>
            <!-- 动态 -->
            <el-row>
              <p class="text2" style="padding-bottom:25px; border-bottom: 1px solid rgb(221, 221, 221);">
                <span>动态</span>
                <span class="text5" @click="readallmessage()">一键已读</span>
              </p>
              <el-row v-if="havemessage" v-cloak>
                <el-row
                  v-for="(messagedetail, index) in messagelist"
                  :key="index"
                >
                  <el-row style="padding-left:25px; padding-bottom:25px; padding-top:25px; border-bottom: 1px solid rgb(221, 221, 221);" @click.native="readmessage(messagedetail.message.messageId)">
                    <el-col :span="1" style="float: left; margin-right: 25px;">
                      <el-avatar size="large" :src="messagedetail.projectLogoUrl" />
                    </el-col>
                    <el-col :span="12" style="cursor: pointer;">
                      <div v-if="messagedetail.message.messageStatus === 1" class="text3">
                        <!-- <span class="text4">{{ getuserinformation(messagedetail.message.userId) }}</span> -->
                        <!-- <span>邀请你进入项目：</span> -->
                        <span>项目：</span>
                        <span class="text4">{{ messagedetail.message.projectName }}</span>
                        <span>期待你的加入！</span>
                      </div>
                      <div v-if="messagedetail.message.messageStatus === 2" class="text3">
                        <span>项目：</span>
                        <span class="text4">{{ messagedetail.message.projectName }}</span>
                        <span>初审通过</span>
                      </div>
                      <div v-if="messagedetail.message.messageStatus === 3" class="text3">
                        <span>项目：</span>
                        <span class="text4">{{ messagedetail.message.projectName }}</span>
                        <span>二审通过</span>
                      </div>
                      <div v-if="messagedetail.message.messageStatus === 4" class="text3">
                        <span>项目：</span>
                        <span class="text4">{{ messagedetail.message.projectName }}</span>
                        <span>提交了结题申请</span>
                      </div>
                      <div v-if="messagedetail.message.messageStatus === 5" class="text3">
                        <span>项目：</span>
                        <span class="text4">{{ messagedetail.message.projectName }}</span>
                        <span>结题申请通过</span>
                      </div>
                      <p class="titletext" style="margin-top:10px;">{{ messagedetail.message.messageTime | formatDate }}</p>
                    </el-col>
                  </el-row>
                </el-row>
                <el-pagination
                  style="text-align: right;"
                  :current-page="paginations.page_index"
                  :page-sizes="paginations.page_sizes"
                  :page-size="paginations.page_size"
                  :layout="paginations.layout"
                  :total="paginations.total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </el-row>
            </el-row>
            <el-row v-if="!havemessage" class="nullmessage">
              暂无动态
            </el-row>
          </el-col>

          <!-- 右边区域 -->
          <el-col class="rightpart" :span="7" style="float:left;">
            <!-- 快速开始 -->
            <el-row>
              <p class="text2" style="padding-bottom:25px; border-bottom: 1px solid rgb(221, 221, 221);">快速开始/便捷导航</p>
              <div style="padding-bottom:25px;">
                <span class="ksks"><el-link type="primary" @click="gotoapply()">新建项目</el-link></span>
                <span class="ksks"><el-link type="primary" @click="gotoendapply()">结题申请</el-link></span>
                <span class="ksks"><el-link type="primary" @click="gotopersonalcenter()">个人中心</el-link></span>
                <span class="ksks"><el-link type="primary" @click="gotoexamscheme()">考核方案</el-link></span>
                <span class="ksks"><el-link type="primary" @click="gotopatentachieve()">论文成果</el-link></span>
                <span class="ksks"><el-link type="primary" @click="logout()">退出登录</el-link></span>
              </div>
            </el-row>
            <!-- 我的项目情况 -->
            <el-row>
              <p class="text2" style="padding-bottom:25px; border-bottom: 1px solid rgb(221, 221, 221);">我的项目情况</p>
              <div>
                <div id="firstchart" style="width: 340px;height: 400px;" />
              </div>
            </el-row>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import axios from 'axios'
import crypto from '../../crypto/crypto'
import * as echarts from 'echarts'
export default {
  name: 'WorkPlace',
  filters: {
    formatDate: function(value) {
      const date = new Date(value)
      const y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? ('0' + MM) : MM
      let d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      let h = date.getHours()
      h = h < 10 ? ('0' + h) : h
      let m = date.getMinutes()
      m = m < 10 ? ('0' + m) : m
      let s = date.getSeconds()
      s = s < 10 ? ('0' + s) : s
      return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
    }
  },
  data() {
    return {
      userid: this.$store.getters.getuserId,
      imgurl: '', // 用户头像
      userinformation: { // 用户部分信息，缓存获取
        username: '',
        rolename: ''
      },
      projectlistlength: 0, // 项目数量，缓存获取
      ctlist: [], // 记录结题形式 用于页面跳转
      messagelist: [], // 消息列表
      havemessage: 0, // 是否有消息
      haveproject: 0, // 是否有项目
      applynum: 0, // 图表数据 缓存获取
      firstnum: 0,
      secondnum: 0,
      endapplynum: 0,
      endnum: 0,
      messageidlist1: { // 批量已读格式
        messageIdList: []
      },
      messageidlist2: { // 读消息id
        messageId: ''
      },
      paginations: { // 分页
        currentPage: 1,
        page_index: 1, // 当前页
        total: 0, // 总数
        page_size: 3, // 一页显示多少
        page_sizes: [3, 6, 9, 12], // 一页显示多少
        layout: 'total, sizes, prev, pager, next'
      },
      routeData: [], // 项目列表
      noMore: false, // 控制滚动禁用
      routeLoad: false, // 控制滚动禁用
      pageNo: 0, // 页码
      pageSize: 3 // 一页6条
    }
  },
  created() {
    this.getuserimg()
    this.getuserinformation(this.userid)
    this.getmsg()
  },
  mounted() {
    this.init()
  },
  methods: {

    /**
     * @description: 初始化数据 生成echart图表
     * @param {*}
     * @return {*}
     * @author: Haiting Zhao
     */
    init() {
      if (typeof this.$store.getters.getapplynum === 'string' && typeof this.$store.getters.getfirstnum === 'string' && typeof this.$store.getters.getsecondnum === 'string' && typeof this.$store.getters.getendapplynum === 'string' && typeof this.$store.getters.getendnum === 'string') {
        this.applynum = crypto.get(this.$store.getters.getapplynum)
        this.firstnum = crypto.get(this.$store.getters.getfirstnum)
        this.secondnum = crypto.get(this.$store.getters.getsecondnum)
        this.endapplynum = crypto.get(this.$store.getters.getendapplynum)
        this.endnum = crypto.get(this.$store.getters.getendnum)
        this.charts()
      } else {
        setTimeout(() => {
          this.applynum = crypto.get(this.$store.getters.getapplynum)
          this.firstnum = crypto.get(this.$store.getters.getfirstnum)
          this.secondnum = crypto.get(this.$store.getters.getsecondnum)
          this.endapplynum = crypto.get(this.$store.getters.getendapplynum)
          this.endnum = crypto.get(this.$store.getters.getendnum)
          this.charts()
        }, 3000)
      }
      if (typeof this.$store.getters.getprojectlistlength === 'string') {
        this.projectlistlength = crypto.get(this.$store.getters.getprojectlistlength)
      } else {
        setTimeout(() => {
          this.projectlistlength = crypto.get(this.$store.getters.getprojectlistlength)
        }, 3000)
      }
    },

    /**
     * @description: 图表
     * @param {*}
     * @return {*}
     * @author: Haiting Zhao
     */
    charts() {
      var maxnum = Math.max(this.applynum, this.firstnum, this.secondnum, this.endapplynum, this.endnum) + 3
      var myChart = echarts.init(document.getElementById('firstchart'))
      var option = {
        title: {
          text: ''
        },
        legend: {
          data: ['', '项目数量']
        },
        tooltip: {
          show: true
        },
        radar: {
          indicator: [
            { name: '已申请', max: maxnum },
            { name: '通过初审', max: maxnum },
            { name: '通过二审', max: maxnum },
            { name: '已结题', max: maxnum },
            { name: '项目完成', max: maxnum }
          ]
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: [this.applynum, this.firstnum, this.secondnum, this.endapplynum, this.endnum],
                name: '项目数量'
              }
            ]
          }
        ]
      }
      myChart.setOption(option)
      this.myChart = myChart
      window.addEventListener('resize', function() { myChart.resize() })
    },
    /**
     * @description: 获取用户头像
     * @param {*}
     * @return {*}
     * @author: Haiting Zhao
     */
    getuserimg() {
      axios.get('/user/getImage', { params: { userId: this.userid }})
        .then((res) => {
          this.imgurl = res.data.data
        })
        .catch(err => {
          console.error(err)
        })
    },

    /**
     * @description: 获取用户个人信息，用于用户信息展示以及动态中姓名展示
     * @param {*}
     * @return {*}
     * @author: Haiting Zhao
     */
    getuserinformation(id) {
      if (typeof this.$store.getters.getuser === 'string') {
        var userinformation = JSON.parse(this.$store.getters.getuser)
        this.userinformation.username = userinformation[id].username
        this.userinformation.rolename = userinformation[id].rolename
        var username = userinformation[id].realname
        return username
      } else {
        setTimeout(() => {
          var userinformation = JSON.parse(this.$store.getters.getuser)
          this.userinformation.username = userinformation[id].username
          this.userinformation.rolename = userinformation[id].rolename
          var username = userinformation[id].realname
          return username
        }, 3000)
      }
    },

    /**
     * @description: 实现滑动请求获取本人项目列表
     * @param {*}
     * @return {*}
     * @author: Haiting Zhao
     */
    infiniteScroll() {
      this.routeLoad = true
      this.pageNo += 1 // 页码每次滚动+1
      this.getRouteList()
    },
    // 获取数据
    getRouteList() {
      axios.get('/project/', { params: { userId: this.userid, pageNum: this.pageNo, pageSize: this.pageSize }})
        .then(res => {
          if (res.data.data) {
            // 把每一次滚动加载请求的数据push的routeData数组
            const list = res.data.data.list
            for (let i = 0; i < list.length; i++) {
              this.routeData.push(list[i])
              this.ctlist.push(list[i].ctId)
            }
            // 如果请求回来的数据小于pageSize，则说明数据到底了。
            if (list.length < 3) {
              this.noMore = true
            }
            // 避免数据总条数是pageSize的倍数时，数据到底还会请求一次。
            if (this.routeData.length === res.data.total) {
              this.noMore = true
            }
            this.routeLoad = false
            if (this.routeData === null) {
              this.haveproject = 0
            } else {
              this.haveproject = 1
            }
          }
        })
        .catch(err => {
          console.error(err)
        })
        .catch(res => {})
    },

    /**
     * @description: 查看全部项目
     * @param {*}
     * @return {*}
     * @author: Haiting Zhao
     */
    gotoall() {
      this.$router.push('/' + crypto.set('5')) // 直接跳转到结题申请页面
    },

    /**
     * @description: 查看详情       跳转到结题申请的详情页面
     * @param {*} index
     * @return {*}
     * @author: Haiting Zhao
     */
    gotodetail(index) {
      sessionStorage.setItem('projectdetail', JSON.stringify(this.routeData[index]))
      if (this.ctlist[index] === 1) { // 论文结题
        this.$router.push('/' + crypto.set('31'))
      } else if (this.ctlist[index] === 2) { // 获奖结题
        this.$router.push('/' + crypto.set('32'))
      } else if (this.ctlist[index] === 3) { // 专利结题
        this.$router.push('/' + crypto.set('33'))
      }
    },

    /**
     * @description: 快速开始 跳转
     * @param {*}
     * @return {*}
     * @author: Haiting Zhao
     */
    gotoapply() {
      this.$router.push('/' + crypto.set('4'))
    },
    gotoendapply() {
      this.$router.push('/' + crypto.set('5'))
    },
    gotopersonalcenter() {
      this.$router.push('/' + crypto.set('38'))
    },
    gotoexamscheme() {
      this.$router.push('/' + crypto.set('15'))
    },
    gotopatentachieve() {
      this.$router.push('/' + crypto.set('20'))
    },
    logout() {
      axios
        .get('user/logout')
        .then(() => {
          this.$message.info('退出成功')
        })
        .catch((error) => {
          console.log(error)
        })
      // 清空token
      window.sessionStorage.clear()
      this.$router.push('/')
      window.location.reload()
    },
    /**
     * @description: 获取动态
     * @param {*}
     * @return {*}
     * @author: Haiting Zhao
     */
    getmsg() {
      axios.get('/msg/send/', { params: { userId: this.userid, pageNum: this.paginations.page_index, pageSize: this.paginations.page_size }})
        .then((res) => {
          if (res.data.data) {
            this.havemessage = 1
            this.messagelist = res.data.data.list
            this.paginations.total = res.data.data.total
          } else {
            this.havemessage = 0
          }
        })
        .catch(err => {
          console.error(err)
        })
    },

    /**
     * @description: 读单条消息
     * @param {*} messageId
     * @return {*}
     * @author: Haiting Zhao
     */
    readmessage(messageId) {
      this.$confirm('点击已读消息将不再提示, 是否继续?', '提示', {
        confirmButtonText: '已读消息',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.messageidlist2.messageId = messageId
        this.messageidlist1.messageIdList[0] = this.messageidlist2
        axios.post('/msg/haveReadList/', this.messageidlist1)
          .then((res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getmsg()
          })
          .catch(err => {
            console.error(err)
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    /**
     * @description: 一键已读
     * @param {*}
     * @return {*}
     * @author: Haiting Zhao
     */
    readallmessage() {
      this.$confirm('已读所有消息，将不再提示, 是否继续?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.get('/msg/haveReadUserId/', { params: { userId: this.userid }})
          .then((res) => {
            // if (res.data.code === 200) {
            //   this.$message({
            //     message: res.data.msg,
            //     type: 'success'
            //   })
            // }
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getmsg()
          })
          .catch(err => {
            console.error(err)
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    /**
     * @description: 一页几条
     * @param {*}
     * @return {*}
     * @author: Haiting Zhao
     */
    handleSizeChange(val) {
      this.paginations.page_size = val
      this.getmsg()
    },

    /**
     * @description: 当前几页
     * @param {*} val
     * @return {*}
     * @author: Haiting Zhao
     */
    handleCurrentChange(val) {
      this.paginations.page_index = val
      this.getmsg()
    }

  }
}
</script>
<style lang="scss">
.text1{
  font-size: 24px;
}
.text2{
  font-size: 20px;
}
.text3{
  font-size: 16px;
}
.text4{
  color: rgb(45, 125, 172);
}
.text5{
  color: dodgerblue;
  font-size: 14px;
  cursor:pointer;
  float: right;
  margin-right: 30px;
  margin-block: 10px;
}
.el-col-12{
  width: auto;
}
.titletext{
  font-size: 13px;
  color: #999;
}
.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
    // width: 25%;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .intro{
          margin: 10px 0px;
          height: 20px;
          font-weight: 200;
          font-size: 13px;
          // text-overflow:ellipsis;
          overflow: hidden;
          white-space:nowrap;
  }
    .el-tooltip__popper{
    font-size: 14px;
    max-width:20%;
  }
  .ksks {
    margin-top: 30px;
    margin-right: 20px;
    font-size: 30px;
  }
  .nullmessage {
    // width: 200px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-weight: 200;
    color: #aaadaf;
    margin: 100px auto;
  }
  .leftpart>.el-row {
    margin-top: 20px;
  }
  .rightpart>.el-row {
    margin-top: 20px;
  }
  [v-cloak] {
  display: none;
}
.all-route {
    height: 300px;
    overflow-y: auto;
  }
</style>
